import React from 'react';
import classNames from 'classnames';
import { SectionSplitProps } from '../../utils/SectionProps';
import SectionHeader from './partials/SectionHeader';
import Image from '../elements/Image';

const propTypes = {
  ...SectionSplitProps.types
}

const defaultProps = {
  ...SectionSplitProps.defaults
}

const FeaturesSplit = ({
  className,
  topOuterDivider,
  bottomOuterDivider,
  topDivider,
  bottomDivider,
  hasBgColor,
  invertColor,
  invertMobile,
  invertDesktop,
  alignTop,
  imageFill,
  ...props
}) => {

  const outerClasses = classNames(
    'features-split section',
    topOuterDivider && 'has-top-divider',
    bottomOuterDivider && 'has-bottom-divider',
    hasBgColor && 'has-bg-color',
    invertColor && 'invert-color',
    className
  );

  const innerClasses = classNames(
    'features-split-inner section-inner',
    topDivider && 'has-top-divider',
    bottomDivider && 'has-bottom-divider'
  );

  const splitClasses = classNames(
    'split-wrap',
    invertMobile && 'invert-mobile',
    invertDesktop && 'invert-desktop',
    alignTop && 'align-top'
  );

  const section1Header = {
    title: '1. Platform Bank',
    paragraph: '在 Platform Bank 中，⽤⼾可以作为存款⼈、借款⼈、担保⼈来参与。存款⼈可以通过向对应的资⾦池注⼊流动性以获得确定性收益。借款⼈可以通过超额抵押进⾏借贷，或者邀请担保⼈对其担保来进⾏零抵押借贷。'
  };
  const section2Header = {
    title: '2. Social Network Bank',
    paragraph: '在 Social Network Bank 中，MyBank作为基础设施平台通过提供对应的⼯具，让任何个体以及组织都可以在我们提供的⼯具基础之上，直接创建⼀个完全属于某⼀个社交⽹络全体成员的集体银⾏。'
  };

  return (
    <section
      {...props}
      className={outerClasses}
    >
      <div className="container">
        <div className={innerClasses}>
          <SectionHeader data={section1Header} className="center-content" />
          <div className={splitClasses}>

            <div className="split-item">
              <div className="split-item-content center-content-mobile reveal-from-left" data-reveal-container=".split-item">
                {/* <div className="text-xxs text-color-primary fw-600 tt-u mb-8">
                  特征一：
                  </div> */}
                <h3 className="mt-0 mb-12">
                  社交属性抵押担保
                  </h3>
                <p className="m-0">
                ⽬前⼤部分 DeFi 借贷产品都是建⽴在抵押制的基础之上，⽤⼾通过抵押担保品从资⾦池中贷出相关的资产，我们尝试在这个基础之上更进⼀步，在提供抵押借贷服务的同时，将通过释放存款⼈资产的流动性发挥其社交价值，提供零抵押贷款服务。存款⼈可以利⽤其存款凭证为好友进⾏贷款担保，好友可基于该担保凭证在平台进⾏零抵押贷款。在担保的过程中担保⼈的存款将继续产⽣收益并不会受到影响，但是⼜同时帮助好友解决了资⾦周转问题。
                  </p>
              </div>
              <div className={
                classNames(
                  'split-item-image center-content-mobile reveal-from-bottom',
                  imageFill && 'split-item-image-fill'
                )}
                data-reveal-container=".split-item">
                <Image
                  src={require('./../../assets/images/features-split-image-01.png')}
                  alt="Features split 01"
                  width={528}
                  height={396} />
              </div>
            </div>

            <div className="split-item">
              <div className="split-item-content center-content-mobile reveal-from-right" data-reveal-container=".split-item">
                {/* <div className="text-xxs text-color-primary fw-600 tt-u mb-8">
                  特性2：
                  </div> */}
                <h3 className="mt-0 mb-12">
                  社交网络圈
                  </h3>
                <p className="m-0">
                在 Platform Bank 中每⼀个⽤⼾也都会维护⼀个属于⾃⼰的社交⽹络圈，好友关系的确认需要得到双⽅的确认。当某⼀位⽤⼾有贷款需求想选择零抵押贷款时，可以通过将贷款事件发送到其好友的收件箱，好友可以选择响应该事件为其担保，担保成功后系统将会给其好友发放贷款，存款凭证将会被系统锁住但不会影响到担保⼈的收益。在贷款⼈还款之前，除⾮担保⼈选择⽀付⼀定的资⾦赎回存款凭证，否则其存款将不能被取出。</p>
              </div>
              <div className={
                classNames(
                  'split-item-image center-content-mobile reveal-from-bottom',
                  imageFill && 'split-item-image-fill'
                )}
                data-reveal-container=".split-item">
                <Image
                  src={require('./../../assets/images/features-split-image-02.png')}
                  alt="Features split 02"
                  width={528}
                  height={396} />
              </div>
            </div>
          </div>
        </div>
        
        <div className={innerClasses}>
         <SectionHeader data={section2Header} className="center-content" />
          <div className={splitClasses}>

            <div className="split-item">
              <div className="split-item-content center-content-mobile reveal-from-left" data-reveal-container=".split-item">
                {/* <div className="text-xxs text-color-primary fw-600 tt-u mb-8">
                  特征一：
                  </div> */}
                <h3 className="mt-0 mb-12">
                  贫穷融资资本问题
                  </h3>
                <p className="m-0">
                ⽬前全世界许多的贷款都要求以住房、汽⻋、公司等资产作为抵押品，或者给有较⾼收⼊稳定⼯作的⼈提供贷款。但是现实⽣活中存在很多极端贫困的⼈群，他们⼏乎没有抵押品没有固定的⼯作，现有的⾦融基础提供的借贷服务很难覆盖到这些⼈群，这⼀部⼈群如需得到贷款开启⾃⼰的事业往往只能选择⾮正式的⾼利贷，穷⼈的融资成本远远⾼于富⼈。</p>
              </div>
              <div className={
                classNames(
                  'split-item-image center-content-mobile reveal-from-bottom',
                  imageFill && 'split-item-image-fill'
                )}
                data-reveal-container=".split-item">
                <Image
                  src={require('./../../assets/images/features-split-image-01.png')}
                  alt="Features split 01"
                  width={528}
                  height={396} />
              </div>
            </div>

            <div className="split-item">
              <div className="split-item-content center-content-mobile reveal-from-right" data-reveal-container=".split-item">
                {/* <div className="text-xxs text-color-primary fw-600 tt-u mb-8">
                  特性2：
                  </div> */}
                <h3 className="mt-0 mb-12">
                  基于信用的借贷体系
                  </h3>
                <p className="m-0">
                越有钱越能得到更多的贷款，越穷就越得不到贷款，在当前的信贷框架之下贫富差距反⽽被进⼀步被拉⼤。⽬前⼤部分⾦融机构的信贷都是以盈利为导向建⽴在不信任的前提之上，从第⼀性原理出发我们认为这个前提并⾮适⽤于所有的场景。因为信贷本应该成为每⼀个⼈的基本权利，信贷等于信任，在相互信任的前提下建⽴借贷关系。 银⾏不⼀定必须是牟利的商业机构，银⾏可以作为⼀个桥梁帮助其⽤⼾能够创造出⾦融之外的更多价值。基于这样⼀种理念，我们将为⽤⼾提供数字化基础设施以及治理⼯具，帮助⽤⼾打造属于⾃⼰的集体制“信任”银⾏。综合区块链、社交⽹络、集体治理的优势来建⽴⼀种新型的信贷机制，让任何个体在有贷款需求时，都能通过⾃⼰的银⾏以公平合理的利率有尊严地享受到⾦融带来的便利。</p>
              </div>
              <div className={
                classNames(
                  'split-item-image center-content-mobile reveal-from-bottom',
                  imageFill && 'split-item-image-fill'
                )}
                data-reveal-container=".split-item">
                <Image
                  src={require('./../../assets/images/features-split-image-02.png')}
                  alt="Features split 02"
                  width={528}
                  height={396} />
              </div>
            </div>

            <div className="split-item">
              <div className="split-item-content center-content-mobile reveal-from-left" data-reveal-container=".split-item">
                {/* <div className="text-xxs text-color-primary fw-600 tt-u mb-8">
                  Lightning fast workflow
                  </div> */}
                <h3 className="mt-0 mb-12">
                  运作方式
                  </h3>
                <p className="m-0">
                每⼀个银⾏都对应⼀个真实的社交⽹络，银⾏的成员在现实⽣活中存在直接的社交联系，相互之间的了解要⾼于外部的第三⽅机构。每⼀个成员都是银⾏的股东，在享受权利的同时也需要履⾏相关的义务。银⾏的管理将由全体成员决定，治理⽅式将基于区块链变得更加透明。</p>
              </div>
              <div className={
                classNames(
                  'split-item-image center-content-mobile reveal-from-bottom',
                  imageFill && 'split-item-image-fill'
                )}
                data-reveal-container=".split-item">
                <Image
                  src={require('./../../assets/images/features-split-image-03.png')}
                  alt="Features split 03"
                  width={528}
                  height={396} />
              </div>
            </div>
          </div>
          </div>
      </div>
    </section>
  );
}

FeaturesSplit.propTypes = propTypes;
FeaturesSplit.defaultProps = defaultProps;

export default FeaturesSplit;